<template>
    <div class="video-config">
        <el-row type="flex" justify="end">
            <div class="more-btns">
                <el-button type="primary" @click="addVideoConfig">新增</el-button>
            </div>
        </el-row>
        <el-table
            v-loading="loading"
            ref="videoTableList"
            :data="tableData"
            style="width: 100%">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="配置名称" prop="authName"></el-table-column>
            <el-table-column label="设备类型" prop="equiptTypeName"></el-table-column>
            <el-table-column label="userId" prop="userId"></el-table-column>
            <el-table-column label="电话号码" prop="phoneNumber"></el-table-column>
            <el-table-column label="appKey" prop="appKey"></el-table-column>
            <el-table-column label="secretKey" prop="secretKey"></el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button @click="editDetail(scope.row)" type="text" size="small">编辑</el-button>
                    <span class="dividing-line">|</span>
                    <el-button @click="deleteItem(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 编辑/新增 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            width="600px"
            top='30vh'
            v-if="dialogEditInfo"
            :visible.sync="dialogEditInfo"
            @close="closeEditInfo"
            v-dialogDrag>
            <video-config-info :configInfo="videoConfigInfo" :closeFun="closeEditInfo"></video-config-info>
        </el-dialog>
    </div>
</template>
<script>
import { getAuth, delAuth } from '@/api/sysConfig'
import VideoConfigInfo from '../Dialog/VideoConfigInfo'

export default {
    name: 'VideoConfig',
    components: {
        VideoConfigInfo
    },
    data() {
        return {
            loading: false,
            dialogTitle: '编辑设置',
            // 列表数据
            tableData: [],
            dialogEditInfo: false,
            // 视频配置信息
            videoConfigInfo: {}
        }
    },
    created() {
        let that = this
        that.getTableData()
    },
    methods: {
        // 获取列表数据
        getTableData() {
            let that = this
            that.loading = true
            let parames = {
                organizationId: 0,
                equiptType: 0
            }
            // 获取列表信息
            getAuth(parames).then(res => {
                that.tableData = res.data
                that.loading = false
            })
        },
        // 新增视频配置
        addVideoConfig() {
            let that = this
            that.dialogTitle = '新增设置'
            that.videoConfigInfo = {}
            that.dialogEditInfo = true
        },
        // 编辑
        editDetail(row) {
            let that = this
            that.dialogTitle = '编辑设置'
            that.videoConfigInfo = row
            that.dialogEditInfo = true
        },
        // 关闭编辑弹框
        closeEditInfo(flag) {
            let that = this
            that.dialogEditInfo = false
            if(flag) {
                that.getTableData()
            }
        },
        // 删除
        deleteItem(row) {
            let that = this

            that.$confirm("确定删除该条视频配置吗？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
            }).then(() => {
                delAuth({id: row.id}).then(res => {
                    if (res.status === 200) {
                        that.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        that.getTableData()
                    } else {
                        that.$message.error(res.info);
                    }
                })
            }).catch(() => {

            })
        }
    }
}
</script>
